/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-06-19 16:59:33
 * @LastEditTime : 2023-06-20 10:56:06
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Router\MenuNav\DiyList\HomePage\Camera.jsx
 * @Description  :
 */
import './Scss/Camera.scss'
import { Http } from '../../../../Api'
import { useRequest, useSessionStorageState, useSize } from 'ahooks'
import { useEffect, useState, useRef } from 'react'
import { Column } from '@ant-design/plots'
import { colorRgb } from '../../../../Configure/Common'
import { GroupingColumnSetUp } from './Common'

export const Camera001 = () => {
    const [temporaryData] = useSessionStorageState('temporaryData')
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [Data, setData] = useState()

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { list } = res
            let data = []
            data = list.flatMap(({ organizationName, online, offLine }) => [
                { title: '在线', type: organizationName, value: online },
                { title: '离线', type: organizationName, value: offLine },
            ])
            setData(data)
        },
    })

    useEffect(() => {
        runAsync({ url: 'getCameraStatistics' })
    }, [runAsync])

    return (
        <div className="Camera001">
            <div className="HomePageTitle">监控统计</div>
            <div className="list" ref={ChartsBox}>
                {Data && size?.height > 0 && (
                    <Column {...GroupingColumnSetUp(Data, colorRgb(temporaryData.themeColor, 1), size)} />
                )}
            </div>
        </div>
    )
}
